import React,{memo} from 'react'
import { Avatar,Image ,Button  } from 'antd'


function UserBox(props, ref){
  let url = 'https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2';
    let color = "#49d404"
  let color2 = "#0ae3e3"
  return <>
    <div className="userBox">
       <div className="user-box-top">
         <div className="ser-box-Avatar">
           <Avatar size={60} src={url} />
         </div>
         <div className="user-box-con">
           <div className="user-text-t">用户姓名</div>
           <div className="user-text-c">UID:3392344234</div>
           <div className="user-text-b">
             <i className="iconfont mt-round_record_fill " style={{color:color}}></i>
              <span style={{marginLeft:5,fontSize:12}}>[ 在线 ]</span>
           </div>
         </div>
         <div className="user-box-r">
           <i className="iconfont mt-xingbienan" style={{color:color2}}></i>
         </div>
       </div>
       <div className="user-list-1">
         <div className="user-l1-text">认证</div>
         <div className="user-l2-text">
          <i className="iconfont mt-yirenzheng-copy"></i>
         </div>
       </div>
      <div className="user-list-1">
        <div className="user-l1-text">所在地</div>
        <div className="user-l2-text">
          宁波
        </div>
      </div>
      <div className="user-list-1" style={{height:70,marginTop:4,marginBottom:1}}>
        <div className="user-l1-text">相册</div>
        <div className="user-l2-text" style={{height:70}}>
          <div className="user-img-box">
            <Image
              width={60}
              preview={false}
              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            />
          </div>
          <div className="user-img-box">
            <Image
              width={60}
              preview={false}
              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            />
          </div>
          <div className="user-img-box">
            <Image
              width={60}
              preview={false}
              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            />
          </div>
        </div>
      </div>
      <div className="user-list-1" style={{height:80}}>
        <div className="user-l1-text">简介</div>
        <div className="user-l2-text" style={{fontSize:14,lineHeight:1.5,height:80}}>
          收到感受感受根深蒂固烧过水帝国时代根深蒂固烧过水当时的是的感受到是的感受到公司
        </div>
      </div>
      <div className="user-list-2">
        <Button className="button">编辑详情</Button>
        {/*<Button type="primary" className="button">发送消息</Button>*/}
        <Button type="primary" className="button">添加好友</Button>
      </div>
    </div>
  </>
}

export default memo(UserBox);
